<template>
  <div class="memberBuyRecord-wrap">
    <div class="memberBuyRecord-main" v-for="(item, index) in buyHistory" :key="index">
      <p class="record-top">
        <span>{{item.buy_name}}</span>
        <span>¥{{item.payment}}</span>
      </p>
      <p class="record-bot">
        <span>{{item.create_time}}</span>
      </p>
    </div>
    <p class="no-data" v-if="buyHistory.length <= 0">暂无数据</p>


  </div>
</template>

<script>
import { getMemberPurchaseRecord } from '@/api/dz/dzCjh'
import Vue from 'vue'

export default Vue.extend({
  data() {
    return {
      buyHistory: [] // 购买记录数据
    }
  },
  created() {
    this.getMemberPurchaseRecord()
  },
  methods: {
    getMemberPurchaseRecord() {
      this.$loadingWrap.show()
      getMemberPurchaseRecord().then(res => {
        this.$loadingWrap.close()
        if (res.status == 1) {
          this.buyHistory = res.data
        } else {
          this.$Error(res.msg)
        }
      })
    }
  }
})
</script>

<style lang='scss'>
  .memberBuyRecord-wrap{
    width: 100%;
    padding-top: 20px;
    .memberBuyRecord-main{
      width: 700px;
      height: 154px;
      background: #ffffff;
      border-radius: 16px;
      margin: 0 auto 20px;
    }
    .record-top{
      font-size: 32px;
      font-weight: 500;
      text-align: left;
      color: #333333;
      overflow: hidden;
      span:nth-child(1){
        float: left;
        margin: 28px 0 0 20px;
      }
      span:nth-child(2){
        float: right;
        margin: 28px 20px 0 0;
      }
    }
    .record-bot{
      font-size: 24px;
      font-weight: 400;
      text-align: left;
      color: #999999;
      overflow: hidden;
      span:nth-child(1){
        float: left;
        margin: 20px 0 0 20px;
      }
      span:nth-child(2){
        float: right;
        margin: 20px 20px 0 0;
      }
    }
  }
  .no-data{
    text-align: center;
    line-height: 200px;
    font-size: 30px;
    color: #B6B6B6;
  }

</style>
